<template>
  <Row :class="classes" type="flex" justify="center">
    <Step
      v-for="(item, index) of data"
      :key="index"
      :title="item[titleKey]"
      :content="item[contentKey]"
      :step-number="index + 1"
      :total="data.length"
      :status="stepStatus[index].status"
      :next-error="stepStatus[index].nextError"
      :can-select="index <= current"
      @click="handleStepClick(index)"
    />
  </Row>
</template>
<script>
import { oneOf } from 'view-design/src/utils/assist'

import Step from './Step'

const prefixCls = 'ivu-steps'

export default {
  name: 'Steps',
  components: {
    Step
  },
  props: {
    current: {
      type: Number,
      default: 0
    },
    status: {
      validator(value) {
        return oneOf(value, ['wait', 'process', 'finish', 'error'])
      },
      default: 'process'
    },
    // eslint-disable-next-line vue/require-default-prop
    size: {
      validator(value) {
        return oneOf(value, ['small'])
      }
    },
    data: {
      type: Array,
      default: () => []
    },
    titleKey: {
      type: String,
      default: () => 'title'
    },
    contentKey: {
      type: String,
      default: () => 'content'
    }
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        `${prefixCls}-horizontal`,
        {
          [`${prefixCls}-${this.size}`]: !!this.size
        }
      ]
    },
    stepStatus() {
      const status = []
      this.data.forEach((item, index) => {
        if (index === this.current) {
          if (this.status !== 'error') {
            status.push({ status: 'process' })
          } else {
            status.push({ status: 'error' })
            if (index > 0) { // 防止溢出
              status[status.length - 2].nextError = true
            }
          }
        } else if (index < this.current) {
          status.push({ status: 'finish' })
        } else {
          status.push({ status: 'wait' })
        }
      })
      return status
    }
  },
  methods: {
    handleStepClick(index) {
      this.$emit('click', index)
    }
  }
}
</script>
